<template lang="html">
  <div class="text-library">
    <div class="text-library-container" >
      <p class="text-library-num">{{ LungtestData.id}}/6</p>
      <h4 class="text-library-question">{{ LungtestData.question }}</h4>
      <ul class="text-library-list" v-for='(item,index) in LungtestData.result' :key='index'>
        <li @click='AddPages(item.score)'>{{ item.title }}</li>
      </ul>
      <router-link tag='div' to='/testresult' class="text-library-commit" @click='getScore'>提交</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name:'TextLibrary',
  data(){
    return{
      page:1,
      scoreArr:[]
    }
  },
  props:{
    LungtestData:{
      type:Object,
      default:function(){
        return {}
      }
    },
  },
  methods:{
    // 给父级传递Page
    AddPages(score){
      this.page += 1;
      this.$emit('setPage',this.page);
      this.scoreArr = this.scoreArr.concat({page:score})
      console.log(this.scoreArr );
    },

    getScore(event){

    }
  }
}
</script>

<style lang="less" scoped>

.text-library{
  width: 100%;
  background-color: #f1f1f1;
  .text-library-container{
    padding: 0.92rem 0.75rem 0 0.75rem;
    box-sizing: border-box;
    background-color: #fff;
    .text-library-num,.text-library-question{
      font-size: 0.26rem;
    }
    .text-library-question{
      font-weight: normal;
      margin: 0.3rem 0 0.7rem 0;
    }
    .text-library-list{
      text-align: center;
      padding: 0 0.2rem;
      li{
        width: 5.7rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border: 1px solid #d4d4d4;
        border-radius: 0.3rem;
        margin-bottom: 0.25rem;
      }
    }
    .text-library-commit{
      width: 6rem;
      height: 0.9rem;
      border-radius: 0.1rem;
      background-color: #43bf92;
      margin: 0 auto;
      text-align: center;
      line-height: 0.9rem;
      font-size: 0.32rem;
      color: #fff;
      margin-top: 1.45rem;
    }
  }
}

</style>
